<template>
    <div class="layout-content">
        <div class="layout-content-main">
            <Breadcrumb class="content-title mbt1">
                <BreadcrumbItem>权限管理</BreadcrumbItem>
            </Breadcrumb>
            <div class="section">
                <div class="section-title"> 
                    权限管理
                </div>
                <Row class="mbt4">
                    <Col span="6">
                    <Input v-model="searchValue" placeholder="请输入权限名称">
                        <Button slot="append" icon="ios-search" @click="search()"></Button>
                     </Input>
                    </Col>
                    <Col span="18" class="text-right">
                    <Button type="primary" size="large" @click="createNewListModal=true">新建权限</Button>
                    </Col>
                </Row>
                <Table border :columns="columns7" :data="jurisdictionList" class="mbt4"></Table>               
                <Page :total="jurisdictionListNUm" show-total class="center" @on-change="changePage" :page-size='9'></Page>
                <!-- 新建菜单start -->
                <Modal v-model="createNewListModal" class="employeeModal" title="新建权限">
                    <Form label-position="right" ref="createNewJurisdiction" :model="createNewJurisdiction" :rules="ruleValidate" :label-width="100">
                        <Row>
                            <Col span="11">
                            <FormItem label="权限名称:" prop="functionName">
                                <Input v-model="createNewJurisdiction.functionName"></Input>
                            </FormItem>
                            </Col>                           
                            <Col span="11">
                            <FormItem label="权限url:" prop="funtionUrl">
                                <Input v-model="createNewJurisdiction.funtionUrl"></Input>
                            </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="11">
                            <FormItem label="权限code:"  prop="functionCode">
                                <Input :maxlength="18" v-model="createNewJurisdiction.functionCode"></Input>
                            </FormItem>
                            </Col>
                            <Col span="11">
                            <FormItem label="权限类型:" prop="functionType">
                                <Select placeholder="请选择" v-model="createNewJurisdiction.functionType">                                                                                                     
                                    <Option value="1">一级菜单</Option>
                                    <Option value="2">二级菜单</Option>
                                    <Option value="3">三级菜单</Option>
                                </Select>
                            </FormItem>                            
                            </Col> 
                            </Row>     
                            <Row>
                                <Col span="11">
                                <FormItem label="排序:">
                                    <Select placeholder="请选择" v-model="createNewJurisdiction.sort">                                                                                                     
                                        <Option :key="item" :value="item" v-for="item in sortList">{{item}}</Option>                                    
                                    </Select>
                                </FormItem>
                                </Col>                               
                                <Col span="11">
                                <FormItem label="上级名称:" prop="parentId">             
                                    <Cascader :data="treeData" change-on-select  @on-change="chooseParentName"  v-model="selectParentNameList"></Cascader>                                                           
                                </FormItem>
                                </Col>
                            </Row>
                            <Row>
                            <Col span="11">
                            <FormItem label="系统权限:" prop="isSystem">
                                <RadioGroup v-model="createNewJurisdiction.isSystem">
                                    <Radio label="0">是</Radio>
                                    <Radio label="1">否</Radio>
                                </RadioGroup>
                            </FormItem>
                            </Col>                             
                            <Col span="11">
                            <FormItem label="备注:">
                                <Input  :maxlength="120" v-model="createNewJurisdiction.remark" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入..."></Input>
                            </FormItem>
                            </Col>                          
                        </Row>
                    </Form>

                     <div slot="footer">
                          <Button @click="createNewListModal=false">取消</Button>
                          <Button type="primary" @click="saveJurisdiction('createNewJurisdiction')">保存</Button>
                        </div>
                </Modal>
                <!-- 新建菜单end -->
                <!--编辑弹 框start  -->
                <Modal v-model="editJurisdictionModal" class="employeeModal" title="编辑权限">
                    <Form label-position="right" ref="editJurisdiction" :model="editJurisdiction" :rules="ruleValidate" :label-width="100">
                        <Row>
                            <Col span="11">
                            <FormItem label="权限名称:" prop="functionName">
                                <Input v-model="editJurisdiction.functionName"></Input>
                            </FormItem>
                            </Col>                                            
                            <Col span="11">
                            <FormItem label="权限url:" prop="funtionUrl">
                                <Input v-model="editJurisdiction.funtionUrl"></Input>
                            </FormItem>
                            </Col>
                        </Row>
                        <Row>                        
                            <Col span="11">
                            <FormItem label="权限类型:" prop="functionType">
                                <Select placeholder="请选择" v-model="editJurisdiction.functionType">                                                                                                     
                                    <Option value="1">一级菜单</Option>
                                    <Option value="2">二级菜单</Option>
                                    <Option value="3">按钮</Option>
                                </Select>
                            </FormItem>                            
                            </Col>                                                            
                                <Col span="11">
                                <FormItem label="排序:">
                                    <Select placeholder="请选择" v-model="editJurisdiction.sort">                                                                                                     
                                        <Option :key="item" :value="item" v-for="item in sortList">{{item}}</Option>                                    
                                    </Select>
                                </FormItem>
                                </Col>
                                </Row>
                                  <Row>
                                <Col span="11">
                                <FormItem label="上级名称:" prop="parentId">             
                                    <Cascader :data="treeData" change-on-select  @on-change="chooseParentName"  v-model="editParentNameList"></Cascader>                                                           
                                </FormItem>
                                </Col>                                                      
                            <Col span="11">
                            <FormItem label="系统权限:" prop="isSystem">
                                <RadioGroup v-model="editJurisdiction.isSystem">
                                    <Radio label="0">是</Radio>
                                    <Radio label="1">否</Radio>
                                </RadioGroup>
                            </FormItem>
                            </Col>                             
                            <Col span="11">
                            <FormItem label="备注:">
                                <Input :maxlength="120" v-model="editJurisdiction.remark" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入..."></Input>
                            </FormItem>
                            </Col>                         
                        </Row>
                    </Form>
                     <div slot="footer">
                          <Button @click="editJurisdictionModal=false">取消</Button>
                          <Button type="primary" @click="saveJurisdiction('editJurisdiction')">保存</Button>
                        </div>
                </Modal>
                <!--编辑弹框end  -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
      //自定义验证code
    const codeValidat = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("code不能为空"));
      }
      setTimeout(() => {
       
        this.$ajax.post("/api/function/info/checkFunctionCode",`functionCode=${this.createNewJurisdiction.functionCode}`)
        .then(response=>{
           // console.log(response.data)
            if(response.data.code==1){
                callback()
            }else{
                callback(new Error(response.data.msg))
            }
        })
      }, 100);
    };
    return {
      pageSize: 9,
      pageNum: 1,
      searchValue:'',
      jurisdictionList: [],
      jurisdictionListNUm: 0,
      createNewListModal: false,
      editJurisdictionModal: false,
      sortList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      parentIdList: [],
      selectParentNameList: [],
      editParentNameList:[],
      treeData: [],
      createNewJurisdiction: {
        parentId: "",
        functionName: "",
        funtionUrl: "",
        functionType: "",
        isSystem: "",
        remark: "",
        sort: "",
        functionCode: "",
        field2:'',
      },
      editJurisdiction: {
       
      },

      ruleValidate: {
        functionId: [{ required: true, message: "权限ID不能为空", trigger: "blur" }],
        functionName: [
          { required: true, message: "权限名称不能为空", trigger: "blur" }
        ],
        funtionUrl: [{ required: true, message: "权限URL不能为空", trigger: "blur" }],

        functionType: [
          { required: true, message: "权限类型不能为空", trigger: "change" }
        ],
        level: [{ required: true, message: "权限层级不能为空", trigger: "change" }],
        isSystem: [
          { required: true, message: "是否系统权限不能为空", trigger: "change" }
        ],
        functionCode: [
          { required: true, validator: codeValidat, trigger: "blur" }
        ]
      },
      columns7: [
        {
          title: "权限ID",
          key: "functionId",
          align: "center",
          width: "150"
        },
        {
          title: "权限名称",
          key: "functionName",
          align: "center"
        },
        {
          title: "权限URL",
          key: "funtionUrl",
          align: "center"
        },
        {
          title: "权限类型",
          key: "functionType",
          align: "center",
          render: (h, params) => {
              
            if (params.row.functionType == null) {
              return "暂无";
            } else if (params.row.functionType == 1) {
              return "一级菜单";
            } else if (params.row.functionType == 2) {
              return "二级菜单";
            } else if (params.row.functionType == 3) {
              return "按钮"
            }
          }
        },
        {
          title: "权限层级",
          key: "level",
          align: "center"
        },
        {
          title: "上级名称",
          key: "parentName",
          align: "center"
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          render: (h, params) => {
            if (params.row.createTime == null) {
              return "暂无";
            } else {
              return new Date(parseInt(params.row.createTime))
                .toLocaleString()
                .replace(/:\d{1,2}$/, " ");
            }
          }
        },
        {
          title: "是否属于系统菜单",
          key: "isSystem",
          align: "center",
          render: (h, params) => {
            if (params.row.isSystem == null) {
              return "暂无";
            } else if (params.row.isSystem == 0) {
              return "是";
            } else if (params.row.isSystem == 1) {
              return "否";
            }
          }
        },

        {
          title: "操作",
          width: 300,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index)
                      this.editJurisdictionModal = true;
                      this.getJurisdictionInfo(params)
                     // console.log(params)
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  mounted() {
    this.getJurisdictionList(this.pageNum, this.pageSize,'');
    this.getTreeData();
  },
  methods: {
    getJurisdictionList(pageNum, pageSize,searchValue) {
      this.$ajax
        .post(
          "/api/function/info/selectAllFunctionList",
          `pageNum=${pageNum}&pageSize=${pageSize}&functionName=${searchValue}`
        )
        .then(response => {
          if (response.data.code == 1) {
            this.jurisdictionList = response.data.resdata.list;
            this.jurisdictionListNUm = response.data.resdata.total;
          } else {
          }
        //  console.log(response.data);
        })
        .catch(error => {});
    },
    //根据菜单功能id查询详
    getJurisdictionInfo(params){
        this.$ajax.post("/api/function/info/selectFunctionById",`functionId=${params.row.functionId}`)
        .then(response=>{
          //  console.log(response.data)
            if(response.data.code==1){
                this.editJurisdiction = response.data.resdata;
                this.editParentNameList = response.data.resdata.field2.split(",")
               

            }else{

            }
        }).catch(error=>{

        })
    },
    //提交表单并验证
    saveJurisdiction(name) {
      if (name == "createNewJurisdiction") {
          this.createNewJurisdiction.field2 = this.selectParentNameList.join(',')
        this.$refs[name].validate(valid => {
          if (valid) {
            // this.$Message.success('提交成功!');
            this.$ajax
              .post(
                "/api/function/info/editFunction",
                this.createNewJurisdiction
              )
              .then(response => {
             //   console.log(response);
                if(response.data.code=1){
                    this.$Message.success(response.data.msg);
                    this.createNewListModal =false;             
                    this.getJurisdictionList(this.pageNum, this.pageSize,'');
                    this.createNewJurisdiction = {};
                }else{
                    this.$Modal.error({
                        title: "错误",
                        content: response.data.msg
                    });
                }
              })
              .catch(error => {
                  this.$Modal.error({
                        title: "错误",
                        content: error
                    });
              });
          } else {
            //this.$Message.error("请完善表单信息!");
          }
        });
      } else if (name == "editJurisdiction") {
          this.editJurisdiction.field2 = this.editParentNameList.join(',')
          this.$refs[name].validate(valid => {
          if (valid) {
          
            this.$ajax
              .post(
                "/api/function/info/editFunction",
                this.editJurisdiction
              )
              .then(response => {
               // console.log(response);
                if(response.data.code=1){
                    this.$Message.success(response.data.msg);
                    this.editJurisdictionModal =false;
                     this.getJurisdictionList(this.pageNum, this.pageSize,'');
                }else{
                    this.$Modal.error({
                        title: "错误",
                        content: response.data.msg
                    });
                }
              })
              .catch(error => {
                  this.$Modal.error({
                        title: "错误",
                        content: error
                    });
              });
          } else {
           // this.$Message.error("请完善表单信息!");
          }
        });


      }
    },
    //获取树形菜单
    getTreeData() {
      this.$ajax
        .post("/api/function/info/selectChooseParentFunction")
        .then(response => {
         // console.log(response.data);
          if (response.data.code == 1) {
            this.treeData = response.data.resdata;
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
    },
    //获取级联选择的选择
    chooseParentName(value, selectedData) {
    if(selectedData[selectedData.length-1].parentId==-1){
      this.createNewJurisdiction.parentId=''
    }else{
       this.createNewJurisdiction.parentId = selectedData[selectedData.length-1].parentId;
    }
  
    },
    //搜索
    search(){
        this.getJurisdictionList(this.pageNum, this.pageSize,this.searchValue);
    },
    remove(params) {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>确定要删除吗？删除后将无法恢复 !</p>",
        onOk: () => {
          //this.data6.splice(index, 1);
          this.$ajax.post("/api/function/info/deleteFunction",`functionId=${params.row.functionId}`)
          .then(response=>{
              if(response.data.code==1){
                  this.$Message.success(response.data.msg);
                   this.jurisdictionList.splice(params.index, 1);

              }else{
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                    });
              }

          }).catch(error=>{
               this.$Modal.error({
                    title: "错误",
                    content: error
                    });
          })
        },
        onCancel: () => {
          this.$Message.info("点击了取消");
        }
      });
    },
    changePage(data) {
      //console.log(data)
      this.getJurisdictionList(data, this.pageSize,this.searchValue);
    },
   
  }
};
</script>

<style>

</style>
